<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .aClass{
            color: red;
        }
        .bClass{
            color: blue;
        }
        .cClass{
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>1.class绑定 :class='xxx'</h2>
    <p class="cClass" :class="a">xxx是字符串</p>
    <p :class="{aClass: isA,bClass: isB}">xxx是对象</p>
    <p :class="['aClass','cClass']"></p>

    <h2>2.style绑定</h2>
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">{color:activeColor,fontSize:fontSize+'px'}</p>
    <button @click="update">更新</button>
</div>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            a:'aClass',
            isA:true,
            isB:false,
            activeColor:'red',
            fontSize:22
        },
        methods:{
            update(){
                this.a='bClass',
                this.isA=false,
                this.isB=true,
                this.activeColor='blue'
                this.fontSize=30
            }
        }
    })
</script>
</body>
</html>
